import React, {Component} from "react";
import { Row, Col, Button, Input, Card, Pagination, message, Table, Popconfirm } from 'antd'
import { ArrowLeftOutlined, SearchOutlined, PlusCircleOutlined, } from '@ant-design/icons'

import './index.less'
import { getScene, deletescene } from '../../api/scene'



class Scene extends Component {

  state = {
    Issearch: false,
    searchList: [],
    keywords: '',
     params: {
      pageNum: 1,
      pageSize: 7,
      scenicName: '',
     },
    total: 0,
    columns: [
      {
        title: '城市',
        dataIndex: 'city',
        width: '80px',
        align: 'center' ,
        editable: false,
      },
      {
        title: '景点名称',
        dataIndex: 'scenicName',
        width: '160px',
        align: 'center' ,
        editable: true,
      },
      {
        title: '经度',
        dataIndex: 'scenicLongitude',
        width: '80px',
        align: 'center' ,
        editable: true,
      },
      {
        title: '纬度',
        dataIndex: 'scenicLatitude',
        width: '80px',
        align: 'center' ,
        editable: true,
      },
      {
        title: '景区地址',
        dataIndex: 'scenicAddress',
        width: '180px',
        align: 'center' ,
        editable: true,
      },
      {
        title: '景区介绍',
        dataIndex: 'scenicContent',
        align: 'center' ,
        width: '280px',
        editable: true,
        render: (text,record) => {
        return <div className="textHd2">{record.scenicContent}</div>
        }
      },
      {
        title: '操作',
        align: 'center' ,
        dataIndex: 'operation',
        width: '180px',
        render: (text,record) => {
           return  <div  style={{display: 'flex', justifyContent: 'space-around'}}>
              <Button onClick={() => this.updateList(record.scenicId)} className="editBtn">编辑</Button>
              <Popconfirm title="改操作将会有就删除这条数据, 是否继续" onConfirm={() => this.deleteList(record.scenicId)} okText="确认" cancelText="取消">
              <Button className="deleteBtn">删除</Button>
              </Popconfirm>
            </div>
        },
      },
    ],
    sceneList: [],
  }

  // 组件创建完成的生命周期
  componentDidMount() {
    this.getSceneList()
  }
  // 获取数据
  getSceneList = async () =>  {
   const res  = await getScene(this.state.params)
   const sceneList = res.data.data
   sceneList.map((item, value) => item.key = value)
   const total = res.data.total
   this.setState({sceneList,total})
}

// 分页页面跳转
  paginationChange = (e) => {
     const params = {...this.state.params, pageNum: e }
     this.setState({params}, () => {
      this.getSceneList()
     })
}
// 监听enter点击事件
  onKeyup = (e) => {
    if(e.keyCode === 13) {
      this.getSearch()
  }
}

// 开始搜索
getSearch =  () => {
  this.setState({params: {...this.state.params, scenicName:  this.state.keywords}}, async () => {
    const res  = await getScene(this.state.params)
    const searchList = res.data.data
    const total = res.data.total
    this.setState({searchList, Issearch: true, total})
  })
}

// 更新用户数据
updateList =  (id) => {
  this.props.history.push({pathname: '/home/sceneUpdate', query: {id}})
}
// 返回上一级
back = () => {
  const params = {...this.state.params, scenicName: '', pageNum: 1 }
  this.setState({Issearch: false, params, keywords: ''}, () => {
    this.getSceneList()
  })
}

// 删除用户
deleteList = async (id) => {
  const res = await deletescene(id)
  if (res.code === 200) {
    message.success('删除数据成功')
  } else {
    message.error('删除数据失败')
  }
  this.getSceneList()
}

 // 添加用户
adduser =  () => {
  this.props.history.push('/home/sceneUpdate')
}


  render() {
    const { sceneList, total, params, Issearch, keywords, searchList,columns } = this.state
    return (
        <div>
           <Row style={{ height: '46px', display: "flex", alignContent: "center"}}>
      <Col span={3}>{Issearch? <Button type="ghost" icon={<ArrowLeftOutlined />} onClick={() => this.back()} className="backBtn">返回</Button> : null }</Col>
      <Col span={6}><Input placeholder="搜索用户" prefix={<SearchOutlined />} value={keywords} onChange={(e) => {this.setState({keywords: e.target.value})}} onKeyUp={(e) => this.onKeyup(e)}></Input></Col>
      <Col span={2} offset={1}><Button type="primary" icon={<SearchOutlined />} onClick={() => this.getSearch()}>搜索</Button></Col>
      <Col span={2}><Button icon={<PlusCircleOutlined />} onClick={() => { this.adduser()}} className="successBtn">增加</Button></Col>
    </Row>
    <Card style={{marginTop: '30px'}}>
      {Issearch ?  <Table 
          pagination={false}
          bordered
          dataSource={searchList}
          columns={columns} ></Table> :  
          <Table  
          pagination={false}
          bordered
          dataSource={sceneList}
          columns={columns}
          ></Table>}
    </Card>
    <div className="pagination">
   <Pagination showQuickJumper current={params.pageNum} total={total} onChange={this.paginationChange} pageSize={params.pageSize} />
    </div>
        </div>
    );
  }
}

export default Scene;
